<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="telephone=no,email=no,date=no,address=no" name="format-detection">
    <link href="../../css/aui.css" rel="stylesheet">
    <link href="../../css/retrievePsd.css" rel="stylesheet">
    <link href="../../css/layer.css" rel="stylesheet">
    <script src="../../js/api.js">
    </script>
    <script src="../../js/layer.js">
    </script>
    <script src="../../js/aui-toast.js" type="text/javascript">
    </script>
    <script src="../../js/common.js">
    </script>
    <title>
        注册
    </title>
    <style>
        .disabled {
            pointer-events: none;
            cursor: default;
            opacity: 0.6;
        }
    </style>
    </link>
    </link>
    </link>
    </meta>
    </meta>
    </meta>
</head>
<body>
<div id="box">
    <div class="WD-shenti">
        <div class="WD-nav">
            <div class="WD-info flex al">
                <div class="lmLogo">
                    <img src="../../img/people.png"/>
                </div>
                <div class="share">
                    <input placeholder="请输入手机号或用户名" type="text" v-model="register.loginName"/>
                </div>
            </div>


            <div class="WD-info flex al">
                <div class="lmLogo">
                    <img src="../../img/shield.png"/>
                </div>
                <div class="need flex between">
                    <div class="inp">
                        <input placeholder="请输入图形验证码" type="text" onblur="checkImgCode(app.register)"
                               v-model="register.imageCode"/>
                    </div>
                    <div class="yzm" onclick="clickCode(this)">
                        <img :src="validateImgSrc"/>
                    </div>
                </div>
            </div>
            <div class="WD-info flex al">
                <div class="lmLogo">
                    <img src="../../img/phone.png"/>
                </div>
                <div class="inp">
                    <input placeholder="请输入手机号" type="text" v-model="register.userPhone"/>
                </div>
            </div>
            <div class="WD-info flex al">
                <div class="lmLogo">
                    <img src="../../img/emil.png"/>
                </div>
                <div class="need flex between">
                    <div class="inp">
                        <input placeholder="请输入验证码" type="text" v-model="register.code"
                               onblur="checkMessage(app.register)"/>
                    </div>
                    <div class="dxyzm">
                        <div onclick="sendMessage(this,app.register)" class="getCode">
                            获取验证码
                        </div>
                    </div>
                </div>
            </div>
            <div class="WD-info flex al">
                <div class="lmLogo">
                    <img src="../../img/people.png"/>
                </div>
                <div class="share">
                    <input @blur="checkShareMessage" placeholder="请输入分享人手机号或用户名" type="text"
                           v-model="register.checkData"/>
                </div>
            </div>
            <div class="WD-info flex al">
                <div class="lmLogo">
                    <img src="../../img/this.png"/>
                </div>
                <div class="heDui">
                    <a @click="checkShareMessage" href="#">
                        点击核对分享人用户信息
                    </a>
                </div>
            </div>
        </div>
        <div class="protocal flex end">
            <img @click="isAgree=!isAgree" src="../../img/checked.png" v-show="isAgree"/>
            <img @click="isAgree=!isAgree" src="../../img/checkDefault.png" style="display: none" v-show="!isAgree"/>
            <p>
                我已阅读并同意
                <a href="union_layer.html">
                    《用户服务协议》
                </a>
            </p>
        </div>
        <div @click="userRegister" class="next" style="margin-top: 2rem">
            下一步
        </div>
    </div>
</div>
</body>

<script src="../../js/vue.min.js"></script>
<script src="../../js/vue-resource.min.js"></script>
<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script>
    // const SURL = "http://192.144.135.180/app/"; // 接口
    // const imgUrl = "http://zzhtwl.oss-cn-qingdao.aliyuncs.com/"; // 图片地址
    var app = new Vue({
        el: '#box',
        data: {
            goods: [],  // 猜你喜欢
            register: {
                loginName: '',
                userPhone: '',//15030102915//18713153528
                checkData: '',
                code: '',
                function: 'register',
                imageCode: ''

            },
            isSuccess: false,
            messageStatus: 10,
            isAgree: true,

        },

        methods: {
            //验证短信
            checkMessage: function () {
                if (this.messageStatus == '1')

                    this.$http.post(SURL + 'app/site/checkMessage', {
                        userPhone: this.register.userPhone,
                        code: '121075',
                        function: 'register'
                    }, {emulateJSON: true}).then(function (res) {

                        if (res.body.status == '1') {
                            alert(res.body.msg)
                        }

                    })
                else {
                    alert('点击发送验证码')
                }
            },
            //  点击核对分享人用户信息

            checkShareMessage: function () {


                this.$http.post(SURL + "app/users/checkShare", {checkData: this.register.checkData}, {emulateJSON: true}).then(function (res) {
                    console.log(res);
                    console.log(document.querySelector('.heDui'))
                    if (res.body.status == 1) {
                        document.querySelector('.heDui').innerHTML = res.body.data[0]
                    } else {
                        console.log('验证不成功')
                    }
                })


            },
            //提交注册信息

            userRegister: function () {
                //加入没有同意用户协议，禁止提交
                if (this.isAgree) {
                    this.$http.post(SURL + 'app/users/checkRegInfo', this.register, {emulateJSON: true}).then(function (res) {
                        console.log(res)
                        if (res.body.status == 1) {
                            alert('注册成功')
                            location.href = "nextRegister.html"
                            localStorage.setItem('reg', JSON.stringify(this.register))
                        } else {
                            alert(res.body.msg)
                        }
                    })
                } else {
                    alert('請接收用戶協議')
                }


            },
            //是否同意用户服务协议
            userProtocol: function () {

            }


        }


    });


    // $(function () {


    //       $.ajax({
    //           url: "http://192.144.135.180/app/users/checkRegInfo",
    //           data: {
    //           		"loginName":"用户名",
    // "userPhone":"13794125662",
    // "code":"888888",
    // "checkData":"13552094987",
    // "function":"register"
    //           },
    //           success: function(data) {
    //               app.goods.push(data.data);
    //               console.log(data)
    //           }
    //       });
    //   })
</script>
<script type="text/javascript">
    /*var NO = '../../img/checkDefault.png';
    var YES = '../../img/checked.png';
    $(function(){
        $('.protocal img').on('tap',function(){
            if($('.protocal').find('img').attr('src') == NO){
                $(this).attr('src',YES);
            }else{
                $(this).attr('src',NO);
            }
        })
    })*/
</script>
</html>
